<template>
    <qly-base-page ref="skyBasePageRef" footer-padding="12rpx 24rpx" show-bg-image>
        <template #navbar>
            <qly-nav-bar :title="navTitle" backgroundColor="rgba(0,0,0,0)"></qly-nav-bar>
        </template>
        <view class="form-card">
            <tr-card borderRadius="12rpx">
                <uni-forms class="bang-form" ref="formRef" :model="form" :rules="rules"
                           label-position="top" label-width="400rpx" err-show-type="toast">
                    <uni-forms-item name="mobile" label="手机号" required>
                        <view class="input-box">
                            <up-input type="text" v-model="form.mobile" border="none"
                                      clearable  placeholder="请输入手机号"/>
                        </view>
                    </uni-forms-item>
                    <uni-forms-item name="verificationCode" label="验证码" required>
                        <view class="input-box">
                            <up-input type="text" v-model="form.verificationCode"  border="none"
                                      clearable placeholder="请输入验证码">
                                <template #suffix>
                                    <view class="code-box">
                                        <up-code
                                                ref="uCodeRef"
                                                @change="codeChange"
                                                seconds="60"
                                                changeText="X秒重新获取"
                                        ></up-code>
                                        <up-button
                                                @tap="getCode"
                                                :text="tips"
                                                size="mini"
                                                color="#00c76a"
                                        ></up-button>
                                    </view>
                                </template>
                            </up-input>
                        </view>
                    </uni-forms-item>
                    <uni-forms-item name="mobile" label="密码" required>
                        <view class="input-box">
                            <up-input type="password" v-model="form.mobile" border="none"
                                      clearable placeholder="请输入密码"/>
                        </view>
                    </uni-forms-item>
                    <uni-forms-item name="mobile" label="确认密码" required>
                        <view class="input-box">
                            <up-input type="password" v-model="form.mobile" border="none"
                                      clearable placeholder="请输入确认密码"/>
                        </view>
                    </uni-forms-item>
                </uni-forms>
            </tr-card>
        </view>
        <template #footer>
            <view class="login-btn">
                <up-button :text="$t('common.confirmModification')" color="#00c76a" size="large"
                           @tap="qly.form.pass(confirm,formRef)"></up-button>
            </view>
        </template>
    </qly-base-page>
</template>
<script setup>

const uCodeRef = ref(null);
const type = ref('')
const tips = ref('');
const navTitle = computed(() => {
    if (type === 'updatePassword') {
        return $t('common.updatePassword')
    } else {
        return $t('common.forgetPassword')
    }
})

const formRef = ref()
const form = ref({
    account: '',
    password: '',
})

const rules = {
    // 对name字段进行必填验证
    account: {
        // name 字段的校验规则
        rules: [
            // 校验 name 不能为空
            {
                required: true,
                errorMessage: $t('form.pleaseEnterYourAccount'),
            },
        ],
    },
    password: {
        // name 字段的校验规则
        rules: [
            // 校验 name 不能为空
            {
                required: true,
                errorMessage: $t('form.pleaseEnterYourPassword'),
            },
        ],
    }
}

const codeChange = (text) => {
    tips.value = text;
};

const getCode = () => {
    if (uCodeRef.value.canGetCode) {
        // 模拟向后端请求验证码
        uni.showLoading({
            title: '正在获取验证码',
        });
        setTimeout(() => {
            uni.hideLoading();
            // 这里此提示会被start()方法中的提示覆盖
            uni.$u.toast('验证码已发送');
            // 通知验证码组件内部开始倒计时
            uCodeRef.value.start();
        }, 2000);
    } else {
        uni.$u.toast('倒计时结束后再发送');
    }
};

const confirm = async () => {
    const newForm = qly.tool.deepCopy(form.value)
    console.log('newForm', newForm)
    newForm.password = qly.auth.encryptPassword(newForm.password)
    
    const res = await qly.api.auth.login(newForm)
    if (res.success) {
        qly.dialog.success('登录成功')
        await qly.auth.handleLoginResult(res)
        uni.reLaunch({
            url: '/pages/tabBar/home/index'
        })
    } else {
        qly.dialog.apiError(res).catch()
    }
}

qly.page.onLoad(() => {
    type.value = qly.page.params.type
})
</script>
<style lang="scss" scoped>


.form-card {
    padding: 32rpx;
    
    .input-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 24rpx;
        width: 100%;
        height: 80rpx;
        background: #F5F5F5;
        border-radius: 16rpx;
        font-size: 32rpx;
        box-sizing: border-box;
    }
}
</style>
